<template>
  <div class="law">
    <lawHead ref="lawHeadRef" title="法律检索"></lawHead>
    <div class="law-cont">
      <div class="left">
        <div class="head1">法律检索</div>
        <div class="left-cont">
          <div class="views" v-for="(item,index) in leftList" :key="index">
            <div class="parent">
              <img src="@/assets/zhome/del.png" alt />
              <span>{{ item.title }}</span>
              <img src="@/assets/zhome/bottom.png" alt />
            </div>
            <div class="child" v-for="(a,b) in item.child" :key="b">
              <img src="@/assets/zhome/nocheck.png" alt />
              <div class="img"></div>
              <span>{{ a.title }}</span>
            </div>
          </div>
        </div>
        <div class="left-tips">当前复审无效只支持在中国数据库中进行搜索</div>
      </div>
      <div class="right">
        <div class="right-head">
          <div v-for="(item,index) in 2" :key="index">{{ index === 1 ? '专利转让' : '复审无效' }}</div>
        </div>
        <div class="right-form">
          <div class="title">常用字段</div>
          <div class="ipt">
            <div class="ipt-left">
              <el-input placeholder="决定号"></el-input>
            </div>
            <div class="ipt-right">
              <el-input placeholder="例如：37256"></el-input>
            </div>
          </div>
          <div class="ipt">
            <div class="ipt-left">
              <div class="flex_1" style="margin-right:20px">
                <el-select v-model="value" placeholder="AND">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </div>
              <div style="width:162px">
                <el-input placeholder="委内编号"></el-input>
              </div>
            </div>
            <div class="ipt-right">
              <el-input placeholder="例如：37256"></el-input>
            </div>
          </div>
          <div class="ipt">
            <div class="ipt-left">
              <div class="flex_1" style="margin-right:20px">
                <el-select v-model="value" placeholder="AND">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </div>
              <div style="width:162px">
                <el-input placeholder="复审/无效请求人"></el-input>
              </div>
            </div>
            <div class="ipt-right">
              <el-input placeholder="例如：张伟"></el-input>
            </div>
          </div>

          <div class="ipt">
            <div class="ipt-left">
              <div class="flex_1" style="margin-right:20px">
                <el-select v-model="value" placeholder="AND">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </div>
              <div style="width:162px">
                <el-input placeholder="决定"></el-input>
              </div>
            </div>
            <div class="ipt-right">
              <el-select v-model="value" placeholder="例如:勾选“全部无效”">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
          </div>

          <div class="ipt">
            <div class="ipt-left">
              <div class="flex_1" style="margin-right:20px">
                <el-select v-model="value" placeholder="AND">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </div>
              <div style="width:162px">
                <el-input placeholder="法律依据"></el-input>
              </div>
            </div>
            <div class="ipt-right">
              <el-input placeholder="例如：张伟"></el-input>
            </div>
          </div>

          <div class="ipt">
            <div class="ipt-left">
              <div class="flex_1" style="margin-right:20px">
                <el-select v-model="value" placeholder="AND">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </div>
              <div style="width:162px">
                <el-select v-model="value" placeholder="决定日">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </div>
            </div>
            <div class="ipt-right" style="display:flex">
              <div style="width:162px">
                <el-select v-model="value" placeholder="某时间段">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </div>
              <div class="flex_1" style="margin-left:20px">
                <el-date-picker
                  v-model="value1"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="年/月/日"
                  end-placeholder="年/月/日"
                  :size="size"
                />
              </div>
            </div>
          </div>

          <div class="title" style="marginTop: 40px">常用字段</div>
          <div class="ipt z_flex">
            <div class="text" style="width: 84px;">文本</div>
            <el-select v-model="value" placeholder="AND" style="width: 162px;margin-right: 20px">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-select v-model="value" style="width: 162px;margin-right: 20px" placeholder="AND">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-input style="margin-right: 20px;flex: 1" placeholder="例如 电动汽车 OR充电桩"></el-input>
            <el-select v-model="value" style="width: 162px;margin-right:20px" placeholder="AND">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <img src="@/assets/zhome/add1.png" alt />
          </div>
          <div class="ipt z_flex">
            <div class="text" style="width: 84px;">公司&人</div>
            <el-select v-model="value" placeholder="AND" style="width: 162px;margin-right: 20px">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-select v-model="value" style="width: 162px;margin-right: 20px" placeholder="AND">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-input style="margin-right: 20px;flex: 1" placeholder="例如 电动汽车 OR充电桩"></el-input>
            <el-select v-model="value" style="width: 162px;margin-right:20px" placeholder="AND">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <img src="@/assets/zhome/add1.png" alt />
          </div>

          <div class="textarea">
            <el-input
              v-model="textarea"
              type="textarea"
              placeholder="REEFLAG:(1) AND AUTHORITY:(CN)"
            />
          </div>
        </div>
        <div class="right-font z_flex">
          <span class="flex_1">当前搜索共0条</span>
          <span style="margin-right: 6px">搜索包含机器翻译数据</span>
          <img v-if="true" src="@/assets/zhome/close.png" alt />
          <img v-else src="@/assets/zhome/open.png" alt />
          <div class="btn z_flex clear">清空</div>
          <div class="btn z_flex">搜索</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import lawHead from "@/components/patent/head.vue";
let leftList = ref([
  {
    title: "中国(1/4)",
    isOpen: true,
    isAll: true,
    child: [
      {
        title: "中国(CN)",
        icon: "",
        isOpen: true
      },
      {
        title: "中国(CN)",
        icon: "",
        isOpen: true
      }
    ]
  },
  {
    title: "中国(1/4)",
    isOpen: true,
    isAll: true,
    child: [
      {
        title: "中国(CN)",
        icon: "",
        isOpen: true
      }
    ]
  }
]);
</script>
<style lang="scss" scoped>
.law {
  padding: 0 240px 60px;
  .textarea {
    height: 120px;
    background: #f4f6fa;
    border: 1px solid #d6dce0;
    border-radius: 4px;
    padding: 20px;
    ::v-deep .el-textarea__inner {
      background: #f4f6fa;
      box-shadow: none;
      padding: 0;
      font-size: 14px;
    }
  }
  &-cont {
    display: flex;
    margin-top: 60px;
  }
  .left {
    width: 320px;
    height: 906px;
    background: #ffffff;
    border-radius: 4px;
    margin-right: 20px;
    &-tips {
      font-size: 12px;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      text-align: center;
      margin-top: 10px;
      color: #a2a6ad;
      line-height: 16px;
    }
    &-cont {
      flex: 1;
      overflow-y: auto;
    }
    .views {
      padding: 10px 0 0;
      cursor: pointer;
      .parent {
        padding: 10px 20px;
        display: flex;
        align-items: center;
        font-size: 12px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        text-align: left;
        color: #202020;
        line-height: 16px;
        span {
          margin: 0 4px 0 10px;
        }
      }
      .child {
        padding: 10px 20px 10px 62px;
        font-size: 12px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: Regular;
        text-align: left;
        color: #202020;
        line-height: 16px;
        display: flex;
        align-items: center;
        .img {
          width: 24px;
          height: 16px;
          background: #ee1c25;
          margin: 0 8px;
        }
      }
    }
    .head1 {
      margin: 0 30px;
      height: 61px;
      border-bottom: 1px solid #d8deea;
      display: flex;
      align-items: center;
      font-size: 16px;
      font-family: PingFang SC, PingFang SC-Semibold;
      font-weight: 600;
      text-align: left;
      color: #202020;
      line-height: 22px;
    }
  }
  .right {
    flex: 1;
    &-font {
      background-color: #ffffff;
      height: 86px;
      border-top: 1px solid #d6dce0;
      display: flex;
      align-items: center;
      padding-right: 20px;
      padding-left: 20px;
      img {
        cursor: pointer;
      }
      .btn {
        width: 80px;
        height: 36px;
        background: #0052d9;
        border-radius: 2px;
        margin-left: 20px;
        cursor: pointer;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: Regular;
        text-align: center;
        color: #ffffff;
      }
      .clear {
        background: #f5f6f8;
        color: #202020;
      }
    }
    &-form {
      padding: 20px 20px 30px;
      border: 2px solid #ffffff;
      background-color: white;
      border-radius: 0px 4px 4px 4px;
      .ipt {
        display: flex;
        margin-bottom: 20px;
        ::v-deep .el-input__wrapper {
          width: 100%;
        }
        &-left {
          width: 344px;
          flex-shrink: 0;
          display: flex;
        }
        &-right {
          flex: 1;
          margin-left: 20px;
        }
      }
      .title {
        font-size: 16px;
        font-family: PingFang SC, PingFang SC-Semibold;
        font-weight: 600;
        text-align: left;
        color: #202020;
        line-height: 22px;
        margin-bottom: 20px;
      }
    }
    &-head {
      width: 290px;
      height: 48px;
      background: url("@/assets/zhome/law.png") no-repeat;
      background-size: 100% 100%;
      display: flex;
      div {
        flex: 1;
        height: 48px;
        line-height: 48px;
        color: #ffffff;
        font-size: 16px;
        font-family: PingFang SC, PingFang SC-Medium;
        font-weight: 400;
        text-align: center;
        cursor: pointer;
      }
      div:last-of-type {
        color: #575966;
      }
    }
  }
}
</style>